[Day 22] 前端樣式(Bootstrap)

第 12 屆 iThome 鐵人賽

DAY 22

Modern Web

用 Python 玩 PDF，結合Django 變成一個網頁系統系列第 22 篇

12th鐵人賽

Frank

2020-10-05 21:43:06

1569 瀏覽

分享至

功能有了就寫樣式吧，讓畫面好看一點，這裡選用Bootstrap，這是一個滿好用的css 框架，有許多寫好的樣式，Grid layout、許多元件、按鈕、下拉式選單(Dropdowns)，只需要套上 class 就可以使用，可以解決大部分的需求，還有 RWD 響應式設計，就可以方便的寫適應各螢幕的樣式，當然如果要複雜的，還是要寫CSS。
Bootstrap 的官網範例就寫得很清楚了，要什麼就去點一下就有程式碼了。

先引入CDN，有CSS 放在<head> 裡面，js 放在body裡
main/main.html

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
          integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<body>
...
<script src="...jquery">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>
        
<script>
...
</script>
</body>

main/main.html，局部程式碼，這裡加了nav，排列一下checkbox 用col-3，所以一行會有四個行政區，套一下按鈕樣式

...
<div class="container">
    <div class="row">
        <div class="col">
            <p class="lead">
                勾選台北市各區
            </p>
        </div>
    </div>
    <form id="form">
        <div class="row">
            {% for district in districtList %}
                <div class="col-3">
                    <div class="form-check">
                        <input
                                class="districtChx form-check-input"
                                type="checkbox" id="chk_{{ district }}"
                                name="checkboxDistrict" value="{{ district }}">
                        <label
                                class="form-check-label"
                                for="chk_{{ district }}">{{ district }}</label>
                    </div>
                </div>
            {% endfor %}
        </div>
        <br />
        <button id="submitBtn" class="btn btn-primary" type="submit">
            產生未來鄉鎮天氣預報PDF
        </button>
    </form>

    <div id="resultDiv"></div>
</div>
...

看起來乾淨整齊一點。
結果圖：